<template>
  <el-table :data="tableDataList" stripe style="width: 100%" :operateShow="operateShow" :pageSize="pageSize" :pageNum="pageNum">
    <el-table-column type="index" label="序号" width="50">
      <template slot-scope="scope">
        <div>
          {{scope.$index+ pageSize*pageNum +1}}
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="title" label="广告标题" width="180"></el-table-column>
    <el-table-column prop="imgUrl" label="封面">
      <template slot-scope="scope">
        <img :src="scope.row.imgUrl" class="head_pic">
      </template>
    </el-table-column>
    <el-table-column prop="position" label="广告位置" :formatter="position"></el-table-column>
    <el-table-column prop="startTime" label="开始时间" :formatter="forStartTime"></el-table-column>
    <el-table-column prop="endTime" label="结束时间" :formatter="forEndTime"></el-table-column>
    <el-table-column label="操作" width="200">
      <template slot-scope="scope">
        <el-button
          type="text"
          size="small"
          @click="editData(scope.row)"
          v-if="operateShow == false && setRole('编辑')"
        >编辑</el-button>
        <el-button
          type="text"
          size="small"
          @click="deletAdvertisement(scope.row)"
          v-if="operateShow == false && setRole('删除')"
        >删除</el-button>
        <el-button
          type="text"
          size="small"
          @click="sortAdvertisement(scope.row.id, -1)"
          v-if="operateShow == true && scope.$index != 0 && setRole('上移')"
        >上移</el-button>
        <el-button
          type="text"
          size="small"
          @click="sortAdvertisement(scope.row.id, 1)"
          v-if="operateShow == true && (scope.$index != tableDataList.length -1) && setRole('下移')"
        >下移</el-button>
        <el-button
          type="text"
          size="small"
          @click="checkData(scope.row)"
          v-if="operateShow == true && setRole('查看')"
        >查看</el-button>
        <el-button
          type="text"
          size="small"
          @click="offline(scope.row)"
          v-if="operateShow == true && setRole('下架')"
        >下架</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import util from "@/util";
import s from "@/util/state";
import u from "@/util";
import {
  sortAdv, // 排序
  offlineAdv, // 下架
  deleteAdv // 删除
} from "@/api";
import { mapState } from "vuex";

export default {
  props: ["tableDataList", "operateShow", "pageSize", "pageNum"],
  computed: mapState(["sub", "power"]),
  data() {
    return {
      listData: []
    };
  },
  methods: {
    position: s.advPosition,
    forStartTime(row) {
      let year = u.foryear(parseInt(row.validityStartTime));
      let time = u.fortime(parseInt(row.validityStartTime));
      return year + " " + time;
    },

    forEndTime(row) {
      if (row.validityEndTime == null) {
        return "--";
      } else {
        let year = u.foryear(parseInt(row.validityEndTime));
        let time = u.fortime(parseInt(row.validityEndTime));
        return year + " " + time;
      }
    },
//  权限配置
    setRole (key) {
      return util.selectTitle(this.power, key)
    },

    sortAdvertisement(advId, optType) {
      let data = {
        advId: advId,
        optType: optType
      };
      sortAdv(data).then(res => {
        if (res.code === 200) {
          this.$emit("listDataFN", this.listData);
        } else {
          this.$message({
            type: "error",
            message: res.msg
          });
        }
      });
    },

    editData(row) {
      this.routerPush(row.status, row.id);
    },

    checkData(row) {
      this.routerPush(row.status, row.id);
    },

    offline(row) {
      this.$confirm("您确认要下架当前广告么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(() => {
        offlineAdv(row.id).then(res => {
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "下架成功"
            });
            this.$emit("listDataFN", this.listData);
          } else {
            this.$message({
              type: "error",
              message: res.msg
            });
          }
        });
      });
    },

    deletAdvertisement(row) {
      this.$confirm("您确认要删除当前广告么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          deleteAdv(row.id).then(res => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "删除成功"
              });
              this.$emit("listDataFN", this.listData);
            } else {
              this.$message({
                type: "error",
                message: res.msg
              });
            }
          });
        })
        .catch(() => {});
    },

    routerPush(status, id) {
      util.routerTo(
        "/app-management/advertisement-management/advertisement-add",
        {
          status: status,
          id: id
        }
      );
    }
  }
};
</script>
<style scoped>
.cell img {
  width: 100%;
}
</style>

